import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components';

import {
  AtTabs,
  AtTabsPane,
} from 'taro-ui'
import { observer, inject } from '@tarojs/mobx';
import NewsItem from "../news-item/news-item";
import "./news-list.scss"
import { post } from "../../api/fetch"

@inject('Store')
@observer

class NewsList extends Component {
  constructor(props) {
    super(props)
    this.state={
      tabsListValue:0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      imgwidth: 0,
      leftList: new Array(),
      rightList: new Array(),
      scrollHeight: 0,
    }
  }

  componentDidMount() {
    const res = Taro.getSystemInfoSync()
    var scrollHeight = res.windowHeight-100;
    var imGwidth = res.windowWidth - 20;
    var imgwidth = imGwidth / 2;
    this.setState({
      imgwidth,
      scrollHeight
    });
    this.setState({
      leftList: new Array(),
      rightList: new Array(),
    })
    this.fetchData(1, 0);
  }

  componentWillUnmount() {
    // 清空存储数据
    this.setState({
      leftList: new Array(),
      rightList: new Array(),
    })
    this.props.Store.clearNewsData();
  }
  fetchData(pageNum, type) {
    var that = this;
    var leftList = new Array();
    var rightList = new Array();
    var leftHight = 0, rightHight = 0, maxHeight = 500;
    let params= {
      type,
      pageNum,
      pageSize: this.state.pageSize,
    };
    post('/getContentList', params).then((res) => {
      var postList = res.data;
      let total = res.total;
      this.setState({
        tabsListValue: type,
        total,
        pageNum,
      });
      this.props.Store.setNewsData(postList)

      for (let i = 0, len = postList.length; i < len; i++) {
        
        let tmp = postList[i];
        // console.log(i, tmp.name)
        tmp.width = tmp.width; //获取图片真实宽度
        tmp.height = tmp.height; //获取图片真实高度
        tmp.itemWidth = this.state.imgwidth; //获取图片显示宽度
        let per = tmp.width / tmp.itemWidth; /*获取图片显示比例*/
        tmp.itemHeight = tmp.height / per;/*获取图片显示高度*/

        if (tmp.itemHeight > maxHeight) {
          tmp.itemHeight = maxHeight;//超限时候设置图片高度为默认高度，防止被刷屏
        }
        if (leftHight == rightHight) {
          leftList.push(tmp);
          
          leftHight = leftHight + tmp.itemHeight;
        } else if (leftHight < rightHight) {
          leftList.push(tmp);
          leftHight = leftHight + tmp.itemHeight;
        } else {
          rightList.push(tmp);
          rightHight = rightHight + tmp.itemHeight;
        }
      }
      const leftListExit = this.state.leftList
      const rightListExit = this.state.rightList
      that.setState({
        leftList: leftListExit.concat(leftList),
        rightList: rightListExit.concat(rightList),
      });
   })
  };
  handleTabsClick (value) {
    this.setState({
      pageNum: 1,  // pageNum重置
      leftList: new Array(),
      rightList: new Array(),
    })
    this.fetchData(1, value)
    return false;
  }
  onScrollToUpper = () => {
    console.log('滚动到顶部事件')
  }
  onScrollToLower = () => {
    let {pageNum, pageSize, tabsListValue} = this.state
    if(this.state.total < pageNum * pageSize){
      return
    }
    this.fetchData(++pageNum, tabsListValue);
  }
  render() {
    // let array=Array.from(this.props.Store.newsData) //必须添加这一句，将mobx数据转为正常数据！！！
    
    const { leftList, rightList, tabsListValue,scrollHeight } = this.state
    const scrollStyle = {height: scrollHeight+'px'}
    const tabList = [
      { title: '发现' },
      { title: '附近' },
    ]
    return (
      <View className='news-wrap'>
        <AtTabs 
          swipeable
          scroll
          current={tabsListValue}
          tabList={tabList}
          onClick={this.handleTabsClick.bind(this)}>
          {
            tabList.map((tab, index) => {
              return  <AtTabsPane current={tabsListValue} index={index} key={String(index)}>
              <View className='tab-content'>
                <ScrollView 
                  className='content scrollview'
                  scrollY
                  scrollWithAnimation
                  style={scrollStyle}
                  onScrollToUpper={this.onScrollToUpper}
                  onScrollToLower={this.onScrollToLower}
                  // onScroll={this.onScroll}
                >
                  <View className='left'>
                    {leftList.map((item) => {
                      return  <View key={item.docid}>
                      <NewsItem
                        title={item.name}
                        publisher={item.publisher}
                        zan_num={item.likeCount}
                        imgsrc={item.previewImagePath}
                        newsId={item.id}
                        avatar={item.publisherAvatar}
                      />
                    </View>
                    })}
                  </View>
                  <View className='right'>
                    {rightList.map((item) => {
                      return <View key={item.docid}>
                      <NewsItem
                        title={item.name}
                        publisher={item.publisher}
                        zan_num={item.likeCount}
                        imgsrc={item.previewImagePath}
                        newsId={item.id}
                        avatar={item.publisherAvatar}
                      />
                    </View>
                    })}
                  </View>
                </ScrollView>
              </View>
            </AtTabsPane>
            })
          }
         

        </AtTabs>
      </View>
    )
  }
}

export default NewsList
